<script setup lang="ts" name="GoodsSku">
import { GoodsInfo, Spec, valueItem } from '@/types/data';
import bwPowerSet from '@/utils/bwpowerMap';
import goodsImageVue from './goods-image.vue';

const props = defineProps<{
  goods:GoodsInfo
  skuId?:string
}>()
const emit = defineEmits<{
  (e:'changeSkuId',skuId:string):void
}>()
const HchangeSelect = (sub:valueItem , item:Spec)=>{
      if(sub.disabled) return
        item.values.filter(v=>v.name !== sub.name).forEach(i=>i.select = false)
        sub.select = !sub.select
        updateDisableStatus()
  // 获取当前选中的规格
  // 判断是否选中了所有规格, 如果选中了就子传父将 skuId 传递过去
      const result = getSelectSpac() 
  // console.log(result)
  // 此方案可行
  // const isAll = result.every(item => item)
  // console.log(isAll)
  // 此方案也可行
  // result.filter(i => i).length === props.goods.specs.length
  // 当全不选中, 将 skuId 传递给父组件
      const isAll = result.every(item=>item)
      if(isAll){
        const key = result.join(star)
        const val = pathMap[key]
        emit('changeSkuId',val[0])
      }else{
        emit('changeSkuId','')
      }
}
const star = '☆'
function getPathMap(){
      //筛选无效的数据(无货的)
        const skus = props.goods.skus.filter(item=>item.inventory > 0)
        //创建一个路径字典
        // console.log(skus);
        
        const pathMap:any = {}
        skus.forEach(i=>{
          //将skus转成字符串数组(都是有货的skus)
          //算法要的是字符串数组，我们就将对象数组转化为字符串数组
          //遍历每一个valuename，获取到每一个值。放在新数组中
        const arr =   i.specs.map(k=>k.valueName)
        //调用算法生成子集
        const result = bwPowerSet(arr)
        //往路径字典中推数据
        result.forEach(arrItem =>{
          const key = arrItem.join(star)
          if(key in pathMap){
            //如果对象中有这个属性，就直接添加id到数组
            pathMap[key].push(i.id)
          }else{
            //如果对象中没有这个属性，就创建一个数组，添加id
            pathMap[key] = [i.id]
          }
        })

})
return pathMap
}
function updateDisableStatus(){
        props.goods.specs.forEach((item , index)=>{
          item.values.forEach(sub =>{
            const selectedArr = getSelectSpac() 
            selectedArr[index] = sub.name
            //  console.log(selectedArr);
            const key = selectedArr.filter(v=>v).join(star)
            //  console.log(key);
            
            if(key in pathMap){
              sub.disabled = false
            }else{
              sub.disabled = true
            }
            
          })
        })
}

function getSelectSpac(){
        const arr:string[] = []
        props.goods.specs.forEach(item=>{
        const res = item.values.find(i=>i.select)
          arr.push(res?.name || '')
        })
        return arr
    }
    //初始化勾选状态
function initSpecSlected(){
        if(!props.skuId) return
        const result = props.goods.skus.find(item=>item.id === props.skuId) 
        if(!result) return
        const selectArr = result.specs.map(item =>item.valueName)
        props.goods.specs.forEach(item=>{
          item.values.forEach(sub=>{
            sub.select = selectArr.includes(sub.name)
          })
        })
    }
        const pathMap = getPathMap()
        console.log(pathMap);
        initSpecSlected()
        updateDisableStatus()
</script>
<template>
  <div class="goods-sku">
    <dl v-for="item in props.goods.specs" :key="item.name">
      <dt>{{ item.name }}</dt>
      <dd>
        <template v-for="sub in item.values" :key="sub.name">
        <img
          @click="HchangeSelect(sub,item)"
          v-if="sub.picture"
          :class="{ selected : sub.select,disabled:sub.disabled }"
          :src="sub.picture"
          :alt="sub.name"
          :title="sub.name"
        />
        <span @click="HchangeSelect(sub,item)" :class="{ selected : sub.select,disabled:sub.disabled }" v-else>{{ sub.name }}</span>
        </template>
      </dd>
    </dl>
  </div>
</template>

<style scoped lang="less">
.sku-state-mixin () {
  border: 1px solid #e4e4e4;
  margin-right: 10px;
  cursor: pointer;
  &.selected {
    border-color: @xtxColor;
  }
  &.disabled {
    opacity: 0.6;
    border-style: dashed;
    cursor: not-allowed;
  }
}
.goods-sku {
  padding-left: 10px;
  padding-top: 20px;
  dl {
    display: flex;
    padding-bottom: 20px;
    align-items: center;
    dt {
      width: 50px;
      color: #999;
    }
    dd {
      flex: 1;
      color: #666;
      > img {
        width: 50px;
        height: 50px;
        margin-top: 5px;
        .sku-state-mixin ();
      }
      > span {
        display: inline-block;
        height: 30px;
        line-height: 30px;
        padding: 0 20px;
        margin-top: 5px;
        .sku-state-mixin ();
      }
    }
  }
}
</style>
